<template>
	<div class="right-container">
		<h3>this is Right Vue</h3>
		<hr />
		<p>right Vue 传参结果为{{init}}</p>
		<button @click="addBroNum" >broNum +1 = {{broNum}}</button>
	</div>
</template>


<script>
	
	//导入eventBus
	import bus from '@/js/EventBus.js'
	
	export default{
		//props里的参数是只读的，建议赋值给变量使用
		//当props都没有默认值时，使用[],否则使用{}
		// props:[p_init],
		props:{
			p_init:{
				
				//缺省值（可选）
				default:10,
				
				//强制传值类型（可选）
				type: Number
				
				//必填项（可选）
				//required:true
				
			}
		},
		data(){
			return{
				init:this.p_init,
				broNum:0
			}
		},
		methods:{
			addBroNum(){
				this.broNum++;
				bus.$emit('broNumChange',this.broNum);
			},
			seeBroNum(){
				
			}
		},
		//生命周期函数要放在methods节点外
		//生命周期-创建阶段
		beforeCreate() {
			console.log("----------------------------------");
			console.log("组件名 ：right.vue");
			console.log("阶段   ：生命周期-创建阶段");
			console.log("函数名 ：beforeCreate");
			console.log("状态   ：组件的 props/data/methods 尚未创建，都处于不可用状态");
			console.log("行为   ：初始化事件和盛明明周期函数");
			console.log("用作   ：（很少用到）");
			console.log("----------------------------------");
		},
		created() {
			bus.$on('broNumChange',(val)=>{this.broNum=val});
			console.log("----------------------------------");
			console.log("组件名 ：right.vue");
			console.log("阶段   ：生命周期-创建阶段");
			console.log("函数名 ：created");
			console.log("状态   ：组件的 props/data/methods 已创建好，都处于可用状态，但组件的模板结构未构建");
			console.log("行为   ：初始化事件和盛明明周期函数");
			console.log("用作   ：（很常用）可以发起ajax请求去拿数据，也可以调用其他数据和方法");
			console.log("----------------------------------");
		},
		beforeMount() {
			console.log("----------------------------------");
			console.log("组件名 ：right.vue");
			console.log("阶段   ：生命周期-创建阶段");
			console.log("函数名 ：beforeMount");
			console.log("状态   ：HTML结构已经创建好，将要渲染到浏览器中，此时浏览器中还有没有当前组件的Dom结构");
			console.log("行为   ：正要将创建好的HTML结构渲染到浏览器中");
			console.log("用作   ：（很少用到）");
			console.log("----------------------------------");
		},
		mounted() {
			console.log("----------------------------------");
			console.log("组件名 ：right.vue");
			console.log("阶段   ：生命周期-创建阶段");
			console.log("函数名 ：mounted");
			console.log("状态   ：HTML结构已经渲染到浏览器中，此时浏览器中已经有了当前组件的Dom结构");
			console.log("行为   ：将要进入 生命周期-运行阶段");
			console.log("用作   ：已经可以操作浏览器中的Dom结构");
			console.log("----------------------------------");
			this.init=111;
		},
		//生命周期-运行阶段
		beforeUpdate(){
			console.log("----------------------------------");
			console.log("组件名 ：right.vue");
			console.log("阶段   ：生命周期-运行阶段");
			console.log("函数名 ：beforeUpdate");
			console.log("状态   ：数据发生改变");
			console.log("行为   ：当数据发生改变时触发，将要去改变页面中的数据");
			console.log("用作   ：");
			console.log("----------------------------------");
		},
		Updated(){
			console.log("----------------------------------");
			console.log("组件名 ：right.vue");
			console.log("阶段   ：生命周期-运行阶段");
			console.log("函数名 ：Updated");
			console.log("状态   ：页面数据已经改变");
			console.log("行为   ：");
			console.log("用作   ：当数据改变之后，为了能够操作最新的Dom结构，使用此生命周期阶段");
			console.log("----------------------------------");
		},
		//生命周期-销毁阶段
		beforeDestory(){
			console.log("----------------------------------");
			console.log("组件名 ：right.vue");
			console.log("阶段   ：生命周期-销毁阶段");
			console.log("函数名 ：beforeDestory");
			console.log("状态   ：本组件将要被销毁，但此时组件还在正常工作");
			console.log("行为   ：本组件将要被（v-if）销毁");
			console.log("用作   ：");
			console.log("----------------------------------");
		},
		destoryed(){
			console.log("----------------------------------");
			console.log("组件名 ：right.vue");
			console.log("阶段   ：生命周期-销毁阶段");
			console.log("函数名 ：destoryed");
			console.log("状态   ：本组件已经被被销毁，本组件的数据侦听器、子组件、事件监听也全部被销毁");
			console.log("行为   ：本组件已经被销毁");
			console.log("用作   ：");
			console.log("----------------------------------");
		}
		// activated()：当keep-alive组件激活时调用
		// deactivated()：当keep-alive组件停用时调用
	}
</script>

<style lang="less">
	.right-container{
		width: 50%;
		padding: 0 20px 20px;
		background-color: green;
		min-height: 250px;
		flex: 1;
	}
</style>